<script setup>
import {ref, defineProps, defineEmits, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const emit = defineEmits()
const props = defineProps({
  addEventVisiable: Boolean
})

const Visiable = ref(false)
watch(() => props.addEventVisiable, newVal => {
  Visiable.value = newVal;
  if (newVal) {
    getAllStation();
    selectStation.value=null
    chargingPiles.value=[]
    response.value={
      chargingPileId: null,
      description: '',
      priority: 1,
      location: '',
      contacts: '',
      contactNumber: ''
    }
  }
})

const formLabelWidth = '140px'
const response = ref({
  chargingPileId: null,
  description: '',
  priority: 1,
  location: '',
  contacts: '',
  contactNumber: ''
})
const handleClose = () => {
  formRef.value.resetFields()
  emit('close', false);
}

const addEvent = () => {
  formRef.value.validate(valid=>{
    if(valid){
      //ElMessage.success("表单验证通过，valid的值为"+valid)

      axios.post('/event/addFault', response.value).then(resp => {
        ElMessage.success(resp.data)
        handleClose()
      }).catch(err => {
        ElMessage.warning(err.response.data)
      })
    }else {
      //ElMessage.warning("表单验证失败")
    }
  })
}

const stations = ref([])
const selectStation = ref()
const getAllStation = () => {
  axios.get(`/station/getStationByPage?page=1&size=100000`).then(resp => {
    stations.value = resp.data.records;
  }).catch(err => {
    ElMessage.warning(err.response.data)
  })
}
const chargingPiles = ref([])
const handleStationChange = val => {
  //获取充电桩对象
  axios.get(`/chargingPile/getChargingPileByStationId/${val}`).then(resp => {
    chargingPiles.value = resp.data;
    response.value.chargingPileId = null;
  })
}

const formRef=ref();
const rules = ref({
  chargingPileId: [
    { required: true, message: '请选择充电桩', trigger: 'change' }
  ],
  description: [
    { required: true, message: '故障描述不能为空', trigger: 'blur' },
    { min: 5, message: '故障描述不能少于5个字', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '详细地点不能为空', trigger: 'blur' }
  ],
  contacts: [
    { required: true, message: '联络人不能为空', trigger: 'blur' }
  ],
  contactNumber: [
    { required: true, message: '联络人电话不能为空', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
  ]
});
</script>

<template>
  <el-dialog v-model="Visiable" title="新增故障" width="500" @close="handleClose">
    <el-form
        :model="response"
        :rules="rules"
        ref="formRef"
    >
      <el-form-item label="充电站" :label-width="formLabelWidth">
        <el-select v-model="selectStation" placeholder="请选择充电站" style="width: 240px"
                   @change="handleStationChange">
          <el-option
              v-for="item in stations"
              :key="item.id"
              :label="item.stationName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="充电桩" :label-width="formLabelWidth" prop="chargingPileId">
        <el-select v-model="response.chargingPileId" placeholder="请选择充电桩" style="width: 240px">
          <el-option
              v-for="item in chargingPiles"
              :key="item.chargingPile.id"
              :label="item.chargingPile.pileCode"
              :value="item.chargingPile.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="故障描述" :label-width="formLabelWidth" prop="description">
        <el-input
            v-model="response.description"
            style="width: 240px"
            :rows="2"
            type="textarea"
            placeholder="故障详情描述"
        />
      </el-form-item>
      <el-form-item label="优先级" :label-width="formLabelWidth">
        <el-radio-group v-model="response.priority">
          <el-radio-button label="低级" :value="1"/>
          <el-radio-button label="中级" :value="2"/>
          <el-radio-button label="高级" :value="3"/>
          <el-radio-button label="最高级" :value="4"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="详细地点" :label-width="formLabelWidth" prop="location">
        <el-input
            v-model="response.location"
            style="width: 240px"
            placeholder="详细地点"
            clearable
        />
      </el-form-item>
      <el-form-item label="联络人" :label-width="formLabelWidth" prop="contacts">
        <el-input
            v-model="response.contacts"
            style="width: 240px"
            placeholder="联络人"
            clearable
        />
      </el-form-item>
      <el-form-item label="联络人电话" :label-width="formLabelWidth" prop="contactNumber">
        <el-input
            v-model="response.contactNumber"
            style="width: 240px"
            placeholder="联络人电话"
            clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="addEvent">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 对话框标题样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: bold;
  color: #333;
}

.el-input,
.el-select,
.el-radio-group {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
}

.el-input::placeholder,
.el-select__placeholder {
  color: #c0c4cc;
}

/* 无线电按钮样式 */
.el-radio-button {
  margin-right: 10px;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer .el-button:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}
</style>